<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2; }
        #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #6ab494; }
        #footer ul li:nth-child(1){ background-image: url(./image/tabBar/index.png); }
        #footer ul li:nth-child(2){ background-image: url(./image/tabBar/wallet.png); }
        #footer ul li:nth-child(3){ background-image: url(./image/tabBar/my.png); }
        #footer ul li:nth-child(1).active{ background-image: url(./image/tabBar/indexs.png); }
        #footer ul li:nth-child(2).active{ background-image: url(./image/tabBar/wallets.png); }
        #footer ul li:nth-child(3).active{ background-image: url(./image/tabBar/mys.png); }
        .flex-con{
        	overflow: auto
        }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header id="statusBar">
    </header>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >首页</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >钱包</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >我的</li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/constants.js"></script>
<script type="text/javascript">
    apiready = function () {
        if(api.systemType == "ios"){
           document.getElementById("statusBar").style.background = "#298cb4";
        }
        $api.fixStatusBar( $api.dom('header') );
        api.setStatusBarStyle({
            style: '#ffffff',
            color: '#298cb4'
        });
        api.addEventListener({
	        name:'logout'
        },function(ret,err){
            var eFootLis = $api.domAll('#footer li');
            $api.removeCls(eFootLis[2], 'active');
          	$api.addCls( eFootLis[0], 'active');
		    api.setFrameGroupIndex({
	            name: 'group',
	            index: 0
        	});
        });
        funIniGroup();  
    }

    function funIniGroup(){
        var eHeaderLis = $api.domAll('header li'),
            frames = [];
        frames.push( { 
            name: 'main', 
            url: 'main.html', 
            bgColor : 'rgba(0,0,0,0.2)',
            bounces:false
        } )
        frames.push( { 
            name: 'unionPay', 
            url: './html/unionPay.html', 
            bgColor : 'rgba(0,0,0,0.2)',
            bounces:false
        } )
        frames.push( { 
            name: 'userinfo', 
            url: './html/userinfo.html', 
            bgColor : 'rgba(0,0,0,0.2)',
            bounces:false
        } )
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0, 
                y: 20, 
                w: api.winWidth, 
                h: $api.dom('#main').offsetHeight-20
            },
            index: 0,
            frames: frames
        }, function (ret, err) {
            //console.log(JSON.stringify(ret));
        });
    }

    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if(typeof($api.getStorage("dl_phone")) == "undefined"){
	        api.openWin({
		        name: 'login',
		        url: './html/login.html'
	        });
          }else{
	        if( tag == $api.dom('#footer li.active') )return;
	        var eFootLis = $api.domAll('#footer li'),
	            eHeaderLis = $api.domAll('header li'),
	            index = 0;
	        for (var i = 0,len = eFootLis.length; i < len; i++) {
	            if( tag == eFootLis[i] ){
	                index = i;
	            }else{
	                $api.removeCls(eFootLis[i], 'active');
	                $api.removeCls(eHeaderLis[i], 'active');
	            }
	        }
	        $api.addCls( eFootLis[index], 'active');
	        api.setFrameGroupIndex({
	            name: 'group',
	            index: index
	        });
        }
    }
</script>